<template>
  <div >
    <el-form :model="UserInfo" :rules="rules" ref="UserInfo" v-loading="loading">
      <el-card class="box-card" shadow="hover" style="margin-bottom:20px">
        <div slot="header" class="clearfix">
          <span>企业基本信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24" :xs="24">
            <el-form-item label="营业执照图片" prop="certPicUrl">
              <Upload :default-image.sync="UserInfo.certPicUrl" :size="1"/>
              <div style="display:flex;align-items: center;">
                <span style="margin-left:30px;color:#ff8704;">图片原文件大小需控制在1M以内，支持jpg、gif、png、bmp</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="商户名称" prop="vendorName">
              <el-input v-model.trim="UserInfo.vendorName" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="商户简称" prop="vendorShortName">
              <span slot="label">商户简称<span style="font-size: 12px;color: gray">（不超过8个字）</span></span>
              <el-input v-model.trim="UserInfo.vendorShortName" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="企业用户联系电话" prop="vendorPhone">
              <el-input v-model.trim="UserInfo.vendorPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="企业用户邮箱" prop="vendorEmail">
              <el-input v-model.trim="UserInfo.vendorEmail" />
            </el-form-item>
          </el-col>

        </el-row> -->
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="所在城市" required>
              <AddressCascader ref="addressCascader" v-model="selectedOptions"
                @selectAddressDetail="selectAddressDetail" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12" :xs="24">
            <el-form-item label="邮政编码" prop="postcode">
              <el-input v-model.trim="UserInfo.postcode" />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model.trim="UserInfo.address" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="企业类型" prop="vendorType">
              <el-select v-model="UserInfo.vendorType">
                <el-option v-for="item in vendorTypeData" :key="item.value" :label="item.value" :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="企业注册证件类型" prop="certType">
              <el-select v-model="UserInfo.certType">
                <el-option v-for="item in certTypeData" :key="item.value" :label="item.value" :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="统一社会信用代码" prop="certNo">
              <el-input v-model.trim="UserInfo.certNo" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="营业执照营业期限" prop="certValiditylStr">
              <br />
              <el-date-picker :disabled="certState" v-model="UserInfo.certValiditylStr" type="date" value-format="yyyy-MM-dd"
                placeholder="选择到期日期">
              </el-date-picker>
              <el-radio-group style="margin-left:15px" v-model="isCertLong" @change="changeCertState">
                <el-radio label="1">长期</el-radio>
                <el-radio label="2">不是长期</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="企业用户联系人姓名" prop="operatorName">
              <el-input v-model.trim="UserInfo.operatorName" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="企业用户联系人手机" prop="operatorMobile">
              <el-input v-model.trim="UserInfo.operatorMobile" />
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="企业用户联系人邮箱" prop="operatorEmail">
              <el-input v-model.trim="UserInfo.operatorEmail" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="企业用户联系人身份证号" prop="operatorIdNo">
              <el-input v-model.trim="UserInfo.operatorIdNo" />
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-card>


      <el-card class="box-card" shadow="hover" style="margin-bottom:20px">
        <div slot="header" class="clearfix">
          <span>法人/负责人信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="法人/负责人身份证人像面" prop="corporateIdPicUrl1">
              <Upload :default-image.sync="UserInfo.corporateIdPicUrl1" :size="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="法人/负责人身份证国徽面" prop="corporateIdPicUrl2">
              <Upload :default-image.sync="UserInfo.corporateIdPicUrl2" :size="1"/>
            </el-form-item>
          </el-col>

        </el-row>
        <div style="display:flex;align-items: center;">
          <span style="margin-left:30px;color:#ff8704;">图片原文件大小需控制在1M以内，支持jpg、gif、png、bmp</span>
        </div>
        
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="法人/负责人姓名" prop="corporateName">
              <el-input v-model.trim="UserInfo.corporateName" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="法人/负责人手机号" prop="corporateMobile">
              <el-input v-model.trim="UserInfo.corporateMobile" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="法人/负责人证件类型" prop="corporateIdType">
              <el-select v-model="UserInfo.corporateIdType">
                <el-option v-for="item in corporateIdTypeData" :key="item.value" :label="item.value"
                  :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="法人/负责人证件号码" prop="corporateIdNo">
              <el-input v-model.trim="UserInfo.corporateIdNo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="法人/负责人证件有效期" prop="corporateIdValidityStr">
              <br />
              <el-date-picker :disabled="idState" v-model="UserInfo.corporateIdValidityStr" type="date" value-format="yyyy-MM-dd"
                placeholder="选择到期日期">
              </el-date-picker>
              <el-radio-group style="margin-left:15px" v-model="isIdLong" @change="changeIdState">
                <el-radio label="1">长期</el-radio>
                <el-radio label="2">不是长期</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="hover" style="margin-bottom:20px">
        <div slot="header" class="clearfix">
          <span>个人账户信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="账户类型" prop="accountBankName">
              <el-select v-model="UserInfo.accountBizType">
                <el-option v-for="item in accountBizTypeData" :key="item.value" :label="item.value"
                  :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="账号户名" prop="accountName">
              <el-input v-model.trim="UserInfo.accountName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="银行账号" prop="accountNo">
              <el-input v-model.trim="UserInfo.accountNo" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="开户城市" required>
              <AddressCascader ref="addressCascader" v-model="selectedOptions2"
                @selectAddressDetail="selectAddressDetail2" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="开户银行（例如：东莞银行）" prop="accountBankSubBranch">
              <span slot="label">开户银行<span style="font-size: 12px;color: gray">（例如：东莞银行）</span></span>
              <el-input v-model.trim="UserInfo.accountBankSubBranch" />
            </el-form-item>
          </el-col>

          <el-col :span="12" :xs="24">
            <el-form-item label="开户行行名（例如：中国工商银行股份有限公司东莞东城支行）" prop="accountBankName">
              <span slot="label">开户行行名<span style="font-size: 12px;color: gray">（例如：中国工商银行股份有限公司东莞东城支行）</span></span>
              <br />
              <el-autocomplete v-model="UserInfo.accountBankName" :fetch-suggestions="querySearchAsync" :debounce=0
                placeholder="请输入内容" @select="handleSelect" style="width: 100%;"></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="预留手机" prop="accountMobile">
              <el-input v-model.trim="UserInfo.accountMobile" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card" shadow="hover" style="margin-bottom:20px">
        <div slot="header" class="clearfix">
          <span>其他证明图片</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24" :xs="24">
            <el-form-item label="其他证明图片">
              <UpImgs :default-image.sync="images2" :size="1" :limit="3" />
              <div style="display:flex;align-items: center;">
                <span style="margin-left:30px;color:#ff8704;">图片原文件大小需控制在1M以内，支持jpg、gif、png、bmp</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-form-item>
        <el-button style="margin-left: 30px" type="primary" @click="submit('UserInfo')">确定</el-button>
        <!-- <el-button type="primary" @click="submit('form')" >确定</el-button> -->
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import AddressCascader from '@/components/AddressCascader'
  import Upload from '@/components/Upload'
  import UpImgs from '@/components/Upload/UpImgs'
  import {vendorPicUpload, platRegist, queryBankCode, photoOcr} from '@/api/account'
  export default {
    props:{
      ICBCtype:Number
    },
    components:{
      AddressCascader,
      Upload,
      UpImgs,
    },
    computed: {
    	...mapGetters(['ICBCInfo']),
    },
    data(){
      return{
        UserInfo:Object.assign({}, this.$store.getters.ICBCInfo),
        restaurants: [],
        state: '',
        timeout:null,
        loading:true,
        // 企业用户类型
        vendorTypeData: [
        	{label: '01',value: '企业'},
        	{label: '06',value: '个体工商户'},
        	],
        // 企业用户注册证件类型
        certTypeData: [
        	{label: '100',value: '全国组织机构代码证书'},
        	{label: '101',value: '营业执照'},
        	{label: '102',value: '行政机关'},
        	{label: '103',value: '社会团体法人登记证书'},
        	{label: '104',value: '军队单位开户核准通知书'},
        	{label: '105',value: '武警部队单位开户核准通知书'},
        	{label: '106',value: '下属机构(具有主管单位批文号)'},
        	{label: '107',value: '其他(包含统一社会信用代码)'},
        	{label: '108',value: '商业登记证'},
        	{label: '109',value: '公司注册证'},
        	],
        // 法人/负责人证件类型
        corporateIdTypeData: [
        	{label: '0',value: '身份证'},
        	{label: '1',value: '护照'},
        	{label: '2',value: '军官证'},
        	{label: '3',value: '士兵证'},
        	{label: '4',value: '港澳台往来通行证'},
        	{label: '5',value: '临时身份证'},
        	{label: '6',value: '户口簿'},
        	{label: '7',value: '其他'},
        	{label: '9',value: '警官证'},
        	{label: '12',value: '外国人永久居留证'},
        	{label: '21',value: '边民出入境通行证'},
        ],
        accountBizTypeData: [
        {label: '1',value: '对公帐户'},
        {label: '2',value: '个人账户'},
        {label: '3',value: '工行收款管家卡'},
        {label: '4',value: '账户管家'},
        ],
        selectedOptions: [], //企业用户地址
        selectedOptions2: [], //银行开户地址
        images: '', //企业用户证件图片
        images2: [], //其他证明图片
        corporateIdPic1: '',
        corporateIdPic2: '',
        rules: {
        	vendorName: [{required: true,message: '请输入',trigger: 'blur'}],
        	vendorPhone: [{required: true,validator: this.$mobileValidator,message: '请输入正确手机号',trigger: 'blur'}],
        	// vendorEmail: [{required: true,message: '请输入',trigger: 'blur'}],
        	// selectedOptions: [{required: false,message: '请输入',trigger: 'blur'}],
        	// selectedOptions2: [{required: false,message: '请输入',trigger: 'blur'}],
        	address: [{required: true,message: '请输入',trigger: 'blur'}],
        	// postcode: [{required: true,message: '请输入',trigger: 'blur'}],
        	vendorType: [{required: true,message: '请输入',trigger: 'blur'}],
        	certType: [{required: true,message: '请输入',trigger: 'blur'}],
        	certNo: [{required: true,message: '请输入',trigger: 'blur'}],
        	certPicUrl: [{required: true,message: '请输入',trigger: 'blur'}],
        	vendorShortName: [{required: true,message: '请输入',trigger: 'blur'}],
        	certValiditylStr: [{required: true,message: '请输入',trigger: 'blur'}],
        	operatorName: [{required: true,message: '请输入',trigger: 'blur'}],
        	operatorMobile: [{required: true,validator: this.$mobileValidator,message: '请输入正确手机号',trigger: 'blur'}],
        	// operatorEmail: [{required: true,message: '请输入',trigger: 'blur'}],
        	operatorIdNo: [{required: true,message: '请输入',trigger: 'blur'}],
        	// 银行
        	accountBankName: [{required: true,message: '请输入',trigger: 'blur'}],
        	accountBankProvince: [{required: true,message: '请输入',trigger: 'blur'}],
        	accountBankCity: [{required: true,message: '请输入',trigger: 'blur'}],
        	accountBankSubBranch: [{required: true,message: '请输入',trigger: 'blur'}],
        	accountBizType: [{required: true,message: '请输入',trigger: 'blur'}],
        	accountMobile: [{required: true,message: '请输入',trigger: 'blur'}],
        	accountName: [{required: true,message: '请输入',trigger: 'blur'}],
        	accountNo: [{required: true,message: '请输入',trigger: 'blur'}],
        	// 法人
        	corporateName: [{required: true,message: '请输入',trigger: 'blur'}],
        	corporateMobile: [{required: true,message: '请输入',trigger: 'blur'}],
        	corporateIdType: [{required: true,message: '请输入',trigger: 'blur'}],
        	corporateIdNo: [{required: true,message: '请输入',trigger: 'blur'}],
        	corporateIdValidityStr: [{required: true,message: '请输入',trigger: 'blur'}],
        	corporateIdPicUrl1: [{required: true,message: '请输入',trigger: 'blur'}],
        	corporateIdPicUrl2: [{required: true,message: '请输入',trigger: 'blur'}],
        },
        certState: false,
        isCertLong: "1",
        idState: false,
        isIdLong: "2",
      }
    },
    watch: {
      UserInfo(val) {
        // 地址回显
        // if (val) {
        //   this.selectedOptions = [val.province.toString(), val.city.toString(), val.county.toString()];
        // } else {
        //   this.selectedOptions = ''
        // }
      },
    	// 企业资质
    	'UserInfo.certPicUrl': {
    		handler(newVal) {
    			if(newVal){
            // 加密
            vendorPicUpload({
            	imgUrl: newVal
            }).then((res) => {
            	this.UserInfo.certPic = res;

              //ocr
              this.handleCertPic(newVal)
            }).catch((error) => {
              this.$set(this.UserInfo, "certPicUrl", '')
            })
          }
    		},
    		deep: true //深度监听对象的变化
    	},
    	// 其他证明
    	images2(val) {
    		if (val && val.length) {
    			val.map((item, index) => {
    				this.get_vendorPicUpload(item.url, index);
    			});
    			return
    		}
    	},
    	// 法人/负责人正面图片
    	'UserInfo.corporateIdPicUrl1': {
    		handler(newVal) {
    			//加密
    			if(newVal){
            vendorPicUpload({
            	imgUrl: newVal
            }).then((res) => {
            	this.UserInfo.corporateIdPic1 = res;
              //ocr
              this.handleIdPic1(newVal)
            }).catch(() => {
              this.$set(this.UserInfo, "corporateIdPicUrl1", '')
            })
          }
    		},
    		deep: true //深度监听对象的变化
    	},
    	// 法人/负责人反面图片
    	'UserInfo.corporateIdPicUrl2': {
    		handler(newVal) {
    			if(newVal){
            // 加密
            vendorPicUpload({
            	imgUrl: newVal
            }).then((res) => {
            	this.UserInfo.corporateIdPic2 = res;

              //ocr
              this.handleIdPic2(newVal)
            }).catch(() => {
              this.$set(this.UserInfo, "corporateIdPicUrl2", '')
            })
          }
    		},
    		deep: true //深度监听对象的变化
    	},
    	// 分行查询
    	'UserInfo.accountBankName':{
    		handler(newVal) {
    			if(newVal){
            // if(this.timeout){
            //   clearTimeout(this.timeout)
            // }
            // let _this = this;
            // this.timeout = setTimeout(() => {
            //   // 查询
            //   queryBankCode({bankName:newVal||''}).then((res) => {
            //     _this.restaurants = res.map((item)=>({
            //       value: item.name,
            //       label: item.bankCode,
            //     }))
            //     _this.$forceUpdate();
            //   }).catch((err) => {
            //     // console.log(err);
            //   })
            // }, 1000);
          }
    		},
    		deep: true //深度监听对象的变化
    	},
      // 企业用户联系电话
    	'UserInfo.vendorPhone':{
    		handler(newVal) {
          if (newVal) {
            if (this.ICBCtype ===1) {
              this.$set(this.UserInfo, 'operatorMobile', Object.assign(newVal).toString())
              this.$set(this.UserInfo, 'corporateMobile', Object.assign(newVal).toString())
              this.$set(this.UserInfo, 'accountMobile', Object.assign(newVal).toString())
            }
          }
    		},
    		deep: true //深度监听对象的变化
    	},
      // 企业用户联系人姓名
    	'UserInfo.operatorName':{
    		handler(newVal) {
          if (newVal) {
            if (this.ICBCtype ===1) {
              this.$set(this.UserInfo, 'corporateName', newVal)
            }
          }
    		},
    		deep: true //深度监听对象的变化
    	},
    },
    created() {
      this.$store.dispatch("user/getPlatInfo");
      this.loading = false
    },
    mounted() {
      if (this.UserInfo.province && this.UserInfo.city && this.UserInfo.county) {
        this.selectedOptions = [this.UserInfo.province.toString(), this.UserInfo.city.toString(), this.UserInfo.county.toString()];
      }
      
      if (this.UserInfo.accountBankAddrIds && this.UserInfo.accountBankAddrIds.length > 0) {
        if (this.UserInfo.accountBankAddrIds.indexOf(",") > 0) {
          let array = this.UserInfo.accountBankAddrIds.split(",");
          this.selectedOptions2 = array;
        }
      }

      this.updateUI()
    },
    methods:{
      querySearchAsync(queryString, cb) {
        this.restaurants = []
        cb(this.restaurants);

        if (queryString === '') {
          return
        }

        if(this.timeout){
          clearTimeout(this.timeout)
        }
        let _this = this;
        this.timeout = setTimeout(() => {
          // 查询
          queryBankCode({bankName:queryString}).then((res) => {
            _this.restaurants = res.map((item)=>({
              value: item.name,
              label: item.bankCode,
            }))
            cb(_this.restaurants);
            _this.$forceUpdate();
          }).catch((err) => {
            // console.log(err);
          })
        }, 1000);
      },
      handleSelect(item) {
      	this.UserInfo.accountBankCode = item.label
      },
      // 图片加密
      get_vendorPicUpload(url, index) {
      	// console.log(url, index);
      	if (index == 0) {
      		// 不加密
      		this.UserInfo.otherCertPicUrl1 = url;
      		// 加密图片
      		vendorPicUpload({
      			imgUrl: url
      		}).then((res) => {
      			this.UserInfo.otherCertPic1 = res;
      		}).catch(() => {
      		})
      	} else if (index == 1) {
      		this.UserInfo.otherCertPicUrl2 = url;
      		vendorPicUpload({
      			imgUrl: url
      		}).then((res) => {
      			this.UserInfo.otherCertPic2 = res;
      		}).catch(() => {
            
      		})
      	} else if (index == 2) {
      		this.UserInfo.otherCertPicUrl3 = url;
      		vendorPicUpload({
      			imgUrl: url
      		}).then((res) => {
      			this.UserInfo.otherCertPic3 = res;
      		}).catch(() => {
            
      		})
      	} else if (index == 3) {
      		this.$message({
      			message: '最多上传三张',
      			type: 'error',
      			duration: 5 * 1000
      		})
      		return
      	}
      },
      // 企业用户所在地
      selectAddressDetail(value) {
      	console.log(value);
      	this.UserInfo.province = value.provinceId;
      	this.UserInfo.city = value.cityId;
      	this.UserInfo.county = value.districtId;
      },
      // 银行开户城市
      selectAddressDetail2(value) {
      	this.UserInfo.accountBankProvince = value.provinceName;
      	this.UserInfo.accountBankCity = value.cityName;

        let accountBankAddrIds = [value.provinceId, value.cityId, value.districtId];
        this.UserInfo.accountBankAddrIds = accountBankAddrIds.join(',');
      },
      submit(UserInfo) {
        console.log(666, this.UserInfo);
        if (!this.UserInfo.province) {
          this.$message.error("请选择所在城市");
          return;
        }
        if (!this.UserInfo.accountBankProvince) {
          this.$message.error("请选择开户城市");
          return;
        }
        if (this.UserInfo.accountBankCode === undefined) {
          this.$message.error("请选择开户行行名");
          return;
        }

      	if(this.ICBCtype ===1){// 第一次填写资料
          // console.log(123456,this.UserInfo);
          this.loading = true
          this.$refs[UserInfo].validate((valid) => {
          	if (valid) {
              setTimeout(()=>{
                this.loading = false
                platRegist({
                	...this.UserInfo
                }).then((res) => {
                  this.$emit('reloadUI')
                  this.getplatInfo()
                	this.$message({
                		message: '编辑成功',
                		type: 'success',
                		duration: 5 * 1000
                	})
                }).catch(() => {})
              },5000)
          	} else {
              this.loading = false;
          		console.log('error submit!!');
          		return false;
          	}
          })
        } else { // 编辑
          this.$emit('confirminfo',this.UserInfo)
        }
      },
      updateUI() {
        if (this.UserInfo && this.UserInfo.certValiditylStr === '9999-12-31') {
          this.isCertLong = "1"
          this.certState = true
        } else {
          this.isCertLong = "2"
          this.certState = false
        }

        if (this.UserInfo && this.UserInfo.corporateIdValidityStr === '9999-12-31') {
          this.isIdLong = "1"
          this.idState = true
        } else {
          this.isIdLong = "2"
          this.idState = false
        }
      },
      changeCertState(value) {
        this.isCertLong = value
        if (this.isCertLong === "1") {
          this.$set(this.UserInfo, "certValiditylStr", '9999-12-31')
          this.certState = true
        } else {
          this.certState = false
        }
      },
      changeIdState(value) {
        this.isIdLong = value
        if (this.isIdLong === "1") {
          this.$set(this.UserInfo, "corporateIdValidityStr", '9999-12-31')
          this.idState = true
        } else {
          this.idState = false
        }
      },
      handleCertPic(url) {
        photoOcr({url: url, type: 3}).then(response => { 
          if (response && response.creditCode) {
							this.$set(this.UserInfo, "certNo", response.creditCode)
						}
          if (response && response.validPeriod) {
            if (response.validPeriod == "长期") {
              this.$set(this.UserInfo, "certValiditylStr", '9999-12-31')
            } else if (response.validPeriod.indexOf("至") > 0) {
              var array = response.validPeriod.split("至")
              if (array[1]== "长期" || array[1]== "不约定期限") {
                this.$set(this.UserInfo, "certValiditylStr", '9999-12-31')
              }
              
              if (array[1].indexOf("年") > 0 && array[1].indexOf("月") > 0 && array[1].indexOf("日") > 0) {
                var dateStr = array[1]
                dateStr = dateStr.replace("年", '-')
                dateStr = dateStr.replace("月", '-')
                dateStr = dateStr.replace("日", '')
                
                let tempArray = dateStr.split("-")
                if (tempArray[1].length == 1 || tempArray[2].length == 1) {
                  if (tempArray[1].length == 1) {
                    tempArray[1] = "0" + tempArray[1]
                  }
                  if (tempArray[2].length == 1) {
                    tempArray[2] = "0" + tempArray[2]
                  }
                  dateStr = tempArray.join("-")
                }

                this.$set(this.UserInfo, "certValiditylStr", dateStr)
              }
            }
            
            if (this.UserInfo && this.UserInfo.certValiditylStr === '9999-12-31') {
              this.isCertLong = "1"
              this.certState = true
            } else {
              this.isCertLong = "2"
              this.certState = false
            }
          }
          if (response && response.companyName) {
            this.$set(this.UserInfo, "vendorName", response.companyName)
          }
          if (response && response.businessAddress) {
            this.$set(this.UserInfo, "address", response.businessAddress)
          }
        }).catch(error => {
          console.log(error);
        })
      },
      handleIdPic1(url) {
        photoOcr({url: url, type: 1}).then(response => { 
          if (response && response.name) {
            this.$set(this.UserInfo, "corporateName", response.name)
          }
          if (response && response.idNumber) {
            this.$set(this.UserInfo, "corporateIdNo", response.idNumber)
          }
        }).catch(error => {
          console.log(error);
        })
      },
      handleIdPic2(url) {
        photoOcr({url: url, type: 1}).then(response => { 
          if (response && response.validPeriod) {
							if (response.validPeriod == "长期") {
								this.$set(this.UserInfo, "corporateIdValidityStr", '9999-12-31')
							} else if (response.validPeriod.indexOf("-") > 0) {
								var array = response.validPeriod.split("-")
								if (array[1]== "长期" || array[1]== "不约定期限") {
									this.$set(this.UserInfo, "corporateIdValidityStr", '9999-12-31')
								}
								if (array[1].indexOf(".") > 0) {
									var dateStr = array[1]
									dateStr = dateStr.replace(".", '-')
									dateStr = dateStr.replace(".", '-')
									this.$set(this.UserInfo, "corporateIdValidityStr", dateStr)
								}
							}
							
							if (this.UserInfo && this.UserInfo.corporateIdValidityStr === '9999-12-31') {
                this.isIdLong = "1"
                this.idState = true
              } else {
                this.isIdLong = "2"
                this.idState = false
              }
						}
        }).catch(error => {
          console.log(error);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
	.flexInput {
		display: flex;
		width: 100%;

		.el-input {
			width: auto;
			flex: 1;
		}
	}
</style>
